<template>
	<view>
		<view  style="padding-top: 30rpx;" v-for="(item, index) in list" :key="item.id">
			<u-swipe-action :show="item.show" :index="index"
			@click="click" @open="open"
			:options="options"
			>
				<view class="detail">
					<view class="name">{{item.name}}</view>
					<view class="price">{{(Number(item.price)/10000).toFixed(1)}}万</view>
					<view class="u-flex text">
						<view>房屋均价 {{Number(item.averageprice)}}元/平</view>
						<!-- <view>|</view>
						<view>小区均价 16789元/平</view> -->
					</view>
				</view>
			</u-swipe-action>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:'',
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#ff3737'
						}
					}
				]
			}
		},
		methods: {
			getList(){
				this.$u.post('/api/user/getMyHousePrice').then(res=>{
					this.list = res.map(item=>({...item,show:!1}))
				})
			},
			click(index,index1) {
				let item = this.list[index]
				this.$u.post('/api/user/delMyHousePrice',{
					id:item.id
				}).then(res=>{
					this.list.splice(index, 1);
					this.$u.toast('删除成功');
				})
			},
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	.detail{background: linear-gradient(145deg, #ff5d5d 25%, #ff5353 0, #ff4747 50%,#ff3737 0,#ff3a33 75%,#ff4747 0,#ff3737 100%);
		margin: 0rpx 30rpx 0;padding: 40rpx;border-radius: 30rpx;color: #fff;width: 690rpx;
		.name{text-align: center;font-size: 30rpx;}
		.price{font-weight: bold;font-size: 40rpx;padding: 20rpx 0 60rpx;text-align: center;}
		.text{justify-content: space-between;justify-content: center;}
	}
</style>
